<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
  <head>
	<title>商品列表</title>
	<link rel="stylesheet" href="css/css.css" type="text/css" />
	<link rel="stylesheet" href="css/cssTile.css" type="text/css" />

	  <style>

		  li{
			  cursor: pointer;
			  transition: all 1.1s;
		  }
		  li:hover{
			  transform: scale(1.2);
		  }
		  #image {
			  display: inline-block;
			  position: relative;
			  margin: 50px;
			  padding: 20px;
			  background: #fafafa;
			  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
			  -moz-border-radius: 4px;
			  border-radius: 4px;
			  color: rgba(0, 0, 0, 0.8);
			  text-shadow: 0 1px 0 #fff;
		  }

		  #image::before, #image::after {
			  position: absolute;
			  content: "";
			  top: 10px;
			  bottom: 15px;
			  left: 10px;
			  width: 50%;
			  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
			  -webkit-transform: rotate(-3deg);
			  -moz-transform: rotate(-3deg);
			  -o-transform: rotate(-3deg);
			  -ms-transform: rotate(-3deg);
			  transform: rotate(-3deg);
			  z-index: -1;
		  }

		  #image::after {
			  right: 10px;
			  left: auto;
			  -webkit-transform: rotate(3deg);
			  -moz-transform: rotate(3deg);
			  -o-transform: rotate(3deg);
			  -ms-transform: rotate(3deg);
			  transform: rotate(3deg);
		  }

		  #image img {
			  vertical-align: bottom;
		  }
	  </style>
  </head>
  <body>
  <%
	  HashMap<String,Long> map=(HashMap<String, Long>) session.getAttribute("novelMap");

  %>
	<%@ include file="header.jsp" %>

	<form action="" method="post">		<!--  -->
	<h3>列表</h3>
	
  	<c:if test="${ novelList.size() > 0 }">		<%-- 这里使用了jstl标签 --%>
		<div class="divGrid">		
			<div class="list">
				<ul>
							
	<c:forEach var="novel" items="${ novelList }" varStatus="status">
		<li>

			 <div class="imgDiv" style="width:260px;height:250px;">
				 <a href="novelInfoServlet?novelNumber=${ novel.novelNumber }" title="${novel.novelName }">
					 <div id="image" style="width: 149px;height: 198px">
					 	<img src="novelImage/${ novel.novelImage }" alt="（无图片）" class="img">
			 		</div>
				 </a>
			 </div>
			 <div class="novelName">
			 	<a href="novelInfoServlet?novelNumber=${ novel.novelNumber }" title="${novel.novelName }">${novel.novelName }</a>
			 </div>
			 

		</li>
	</c:forEach>		
				
				</ul>	
			</div>
		</div>
		
		<div style="width:900px; margin:0px auto;">
			${ page }
		</div>
  	</c:if>
	</form>


	<div style="width:900px; margin:0px auto;">${ msg }</div>
	
	<%@ include file="footer.jsp" %>
  </body>
<script type="text/javascript">
function checkAll() {
	var checkboxList = document.getElementsByName("novelId");			//获取复选框列表
	var checkboxAll  = document.getElementsByName("checkboxAll")[0];	//全选复选框
	
	for (var i = 0; i < checkboxList.length; i++) {						//对于列表中的每一个复选框
		checkboxList[i].checked = checkboxAll.checked;					//此复选框的勾选情况与全选复选框一致
	}
}
</script>
</html>
